<template>
  <div class="detail_wrap safe">
    <!-- <div class="go-back" @click="handleGoBack">
      <van-icon :size="20" name="arrow-left" />
    </div> -->
    <van-list
      v-model="listConfig.loading"
      :finished="listConfig.finished"
      finished-text=""
      @load="getList"
      :offset="0"
      :immediate-check="false"
    >
      <div class="banner_wrap">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in ad.bannerLink" :key="index">
            <div class="banner_item">
              <van-image fit="cover" :src="item.link" />
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="detail-container">
        <div class="detail_title">选手详情</div>
        <div class="detail_head">
          <div
            v-if="
              page.contestantDetailComponent &&
              page.contestantDetailComponent.element.VC
            "
            class="item"
            :style="{
              borderLeft: '1px solid ' + basic.theme || cfg.theme,
            }"
          >
            <div class="num" :style="{ color: basic.theme }">
              {{ detail.vc }}
            </div>
            <div class="name">
              <span class="iconfont icontongjizhongxin"></span>
              当前{{ voteInfo.unit }}数
            </div>
          </div>
          <!-- <div class="line" :style="{ background: basic.theme }"></div> -->
          <div
            class="item"
            :style="{
              borderLeft: '1px solid ' + basic.theme || cfg.theme,
            }"
          >
            <div
              class="num"
              :style="{ color: basic.theme }"
              v-if="numDetail.previous"
            >
              {{ numDetail.previous.length ? numDetail.previous[0].vc : 0
              }}{{ voteInfo.unit }}
            </div>
            <div class="name">
              <span class="iconfont icontongjibaobiao"></span>
              距前一名
            </div>
          </div>
        </div>
        <div class="detail_images" v-if="numDetail.no <= 10">
          <div class="stripes_wrap">
            <div class="angled-135 stripes" ref="stripesl"></div>
          </div>
          <div class="img_02">
            <img src="../../assets/images/prize1.png" alt="" />
            <div class="tips_btn">
              <span :style="{ color: basic.theme }">第10名</span>
            </div>
            <div class="tips">榜上有名</div>
          </div>
          <div class="img_03">
            <img src="../../assets/images/prize2.png" alt="" />
            <div class="tips_btn">
              <span :style="{ color: basic.theme }">第3名</span>
            </div>
            <div class="tips">力争第一</div>
          </div>
          <div class="img_04" ref="img_04">
            <div class="huoqiu_wrap">
              <img src="../../assets/images/huoqiu.png" alt="" />
              <div class="no" :style="{ color: basic.theme }">
                第{{ numDetail.no }}名
              </div>
            </div>
          </div>
          <div class="img_05">
            <img src="../../assets/images/prize3.png" alt="" />
            <div class="tips_btn">
              <span :style="{ color: basic.theme }">第1名</span>
            </div>
            <div class="tips">勇夺榜首</div>
          </div>
        </div>
        <!-- <div>
          <div class="stripes_wrap" v-if="numDetail.no <= 10">
            <div class="angled-135 stripes" ref="stripesl"></div>
          </div>
        </div> -->
        <div class="info_wrap">
          <div class="ranking_title" :style="{ color: basic.theme }">
            <div>当前排名：{{ numDetail.no }}</div>
            <img src="../../assets/images/prize6.png" alt="" />
          </div>
          <div
            class="player_img"
            v-if="
              page.contestantDetailComponent &&
              page.contestantDetailComponent.element.COVER
            "
          >
            <van-image
              fit="cover"
              radius="10px"
              :src="
                detail.coverType === 'IMAGE' && detail.coverLink
                  ? detail.coverLink
                  : require('../../assets/images/cover.png')
              "
            />
            <div
              class="left_show"
              :style="{ background: basic.theme }"
              v-if="
                page.contestantListComponent &&
                page.contestantListComponent.element.NUMBER
              "
            >
              {{ detail.number < 10 ? "0" + detail.number : detail.number }}:{{
                detail.name
              }}
            </div>
          </div>
          <div class="details">
            <template v-if="detail.imageLink && detail.imageLink.length">
              <div class="intr_title">选手图片</div>
              <div
                class="CAROUSEL"
                v-if="
                  page.contestantDetailComponent &&
                  page.contestantDetailComponent.coverStyle == 'CAROUSEL'
                "
              >
                <van-swipe
                  class="my-swipe"
                  :autoplay="3000"
                  indicator-color="white"
                >
                  <van-swipe-item
                    v-for="(item, index) in detail.imageLink"
                    :key="index"
                  >
                    <div class="banner_item">
                      <van-image fit="cover" :src="item" />
                    </div>
                  </van-swipe-item>
                </van-swipe>
              </div>
              <div
                class="JIUGONGGE"
                v-if="
                  page.contestantDetailComponent &&
                  page.contestantDetailComponent.coverStyle == 'JIUGONGGE'
                "
              >
                <van-grid :border="false" :column-num="3" :square="true">
                  <van-grid-item
                    v-for="(item, index) in detail.imageLink"
                    :key="index"
                  >
                    <van-image fit="cover" :src="item" />
                  </van-grid-item>
                </van-grid>
              </div>
              <div
                class="VERTICAL"
                v-if="
                  page.contestantDetailComponent &&
                  page.contestantDetailComponent.coverStyle == 'VERTICAL'
                "
              >
                <div
                  class="VERTICAL_item"
                  v-for="(item, index) in detail.imageLink"
                  :key="index"
                >
                  <van-image fit="cover" :src="item" />
                </div>
              </div>
            </template>

            <div class="intr_title">参赛介绍</div>
            <div
              v-if="detail.detailsType == 'TEXT' && detail.details"
              v-html="detail.details"
            ></div>
          </div>
        </div>
      </div>
      <div class="comment_wrap" v-if="commentary.enabled">
        <van-field
          v-model="content"
          rows="5"
          autosize
          type="textarea"
          maxlength="128"
          placeholder="请输入评论内容"
          show-word-limit
        />
        <div
          :style="{ background: basic.theme || cfg.theme }"
          class="submitComment"
          @click="submitComment"
        >
          发布评论
        </div>
      </div>
      <div class="comment-list" v-if="commentList.length">
        <div class="title">评论（{{ count }}）</div>
        <div
          class="comment-item"
          v-for="(item, index) in commentList"
          :key="index"
        >
          <div class="item-left">
            <img :src="item.userPhotoLink" alt="" />
          </div>
          <div class="item-right">
            <div class="title_name">
              <span>{{ item.userNickname }}</span>
              给
              <span :style="{ color: basic.theme || cfg.theme }"
                >{{ item.contestantNumber }}号{{ item.contestantName }}</span
              >
              评论
            </div>
            <div class="details_ll">{{ item.content }}</div>
            <div class="detail_time">{{ item.createdTime }}</div>
          </div>
        </div>
      </div>
      <footer-logo></footer-logo>
    </van-list>
    <div class="btn_wrap">
      <div class="go-back" @click="handleGoBack">
        <img src="../../assets/images/411.png" alt="" />
      </div>
      <div
        v-if="
          page.contestantDetailComponent &&
          page.contestantDetailComponent.element.VOTING_BUTTON
        "
        class="voteBtn"
        @click="handleVote"
      >
        <span v-if="!contestantIds.length">{{ voteInfo.type }}</span>
        <span style="color: #666" v-else>已选择</span>
      </div>
      <div
        v-if="
          page.contestantDetailComponent &&
          page.contestantDetailComponent.element.PULL_BUTTON
        "
        class="share"
        @click="handlePull"
      >
        <img src="../../assets/images/4_13.png" alt="" />
      </div>
    </div>
    <div class="choice" v-if="contestantIds.length">
      <div class="choice_wrap">
        <div class="choice-left" v-if="rule.type == 'MULTIPLE_CHOICE'">
          已选<span :style="{color: basic.theme || cfg.theme}">{{contestantIds.length}}</span>项
          ，最少<span :style="{color: basic.theme || cfg.theme}">{{rule.typeMultipleChoiceMinValue}}</span>项
          ，最多<span :style="{color: basic.theme || cfg.theme}">{{rule.typeMultipleChoiceMaxValue}}</span>项
        </div>
        <div class="choice-left" v-if="rule.type == 'REQUIRED_CHOICE'">
          已选<span :style="{color: basic.theme || cfg.theme}">{{contestantIds.length}}</span>项
          ，必须选择<span :style="{color: basic.theme || cfg.theme}">{{rule.typeRequiredChoiceValue}}</span>项
        </div>
        <div
          @click="handleVotes"
          :style="{
            background: basic.theme || cfg.theme,
          }"
          class="choice-right"
        >
          <span class="iconfont iconicon-test"></span>
          <span style="margin-left: 4px">{{ voteInfo.type }}</span>
        </div>
      </div>
    </div>
    <van-dialog
      v-model="showWeChatCode"
      title="提示"
      show-cancel-button
      :show-confirm-button="false"
      cancelButtonText="关闭"
      @close="handleClose"
    >
      <div id="qrWeChatCode">
        <img style="width: 140px; height: 140px" :src="wechatCodeQR" alt="" />
        <span>请先扫码关注公众号后操作</span>
      </div>
    </van-dialog>
    <van-dialog
      v-model="showVerfyCode"
      title="验证码"
      :confirm-button-text="voteInfo.type"
      show-cancel-button
      @confirm="handleConfirm"
      @close="codeImage.code = ''"
    >
      <div class="verfyCode_wrap">
        <div class="input">
          <van-field
            maxlength="4"
            v-model="codeImage.code"
            placeholder="请输入验证码"
            :error-message="codeImage.errorCode"
          />
        </div>
        <div class="img">
          <img :src="codeImage.url" alt="" />
        </div>
      </div>
    </van-dialog>
    <van-dialog
      v-model="votedConfig.showVoted"
      :title="votedConfig.votedText"
      show-cancel-button
      cancelButtonText="关闭"
      confirmButtonText="去看看"
      @close="handleCloseVoted"
      @confirm="handleConfirmVoted"
      className="votedLink"
    >
      <div>
        <div v-if="votedConfig.tips" class="votedTips">
          {{ votedConfig.tips }}
        </div>
        <div class="link_wrap" v-if="ad.votingLink">
          <van-image fit="cover" :src="ad.votingLink.link" />
        </div>
      </div>
    </van-dialog>
    <!-- <van-dialog
      v-model="pullVoteShow"
      className="pullVoteShow"
      :show-confirm-button="false"
    >
      <div class="pull_wrap">
        <div class="pull_box">
          <div class="number">
            <div class="num">01号</div>
          </div>
          <div class="name">名称</div>
          <div class="avater">
            <van-image
              fit="cover"
              :src="require('../../assets/images/cover.png')"
            />
          </div>
          <div class="bottom_wrap">
            <div class="textTips">
              <div class="text1">长按识别二维码</div>
              <div class="text2">请为我投票吧！</div>
            </div>
            <div class="qrcode"></div>
          </div>
        </div>
        <div class="close_box">
          <span>长按保存图片</span>
          <van-icon name="close" />
        </div>
      </div>
    </van-dialog> -->
    <div class="pullVoteShow" v-show="pullVoteShow">
      <van-overlay :show="pullVoteShow">
        <div class="pull_wrap">
          <div v-if="!pullImage" class="pull_box" ref="posters">
            <div class="number">
              <div class="num">01号</div>
            </div>
            <div class="name">名称</div>
            <div class="avater">
              <!-- <van-image
                fit="cover"
                :src="
                  avater ? avater : require('../../assets/images/cover.png')
                "
              /> -->
              <img
                :src="avater ? avater : '../../assets/images/cover.png'"
                alt=""
              />
            </div>
            <div class="bottom_wrap">
              <div class="textTips">
                <div class="text1">长按识别二维码</div>
                <div class="text2">请为我投票吧！</div>
              </div>
              <div class="qrcode">
                <vue-qr
                  :text="QRcodeUrl"
                  :margin="0"
                  colorDark="#000"
                  colorLight="#fff"
                  :logoScale="0.3"
                  :size="80"
                ></vue-qr>
              </div>
            </div>
          </div>
          <div style="width: 100%; height: 100%">
            <img style="width: 100%; height: 100%" :src="pullImage" alt="" />
          </div>
          <div class="close_box">
            <span style="padding-bottom: 10px">长按保存图片</span>
            <van-icon @click="pullVoteShow = false" :size="26" name="close" />
          </div>
        </div>
      </van-overlay>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import footerLogo from "@/components/footerLogo";
import cfg from "@/config";
import { LgetItem } from "@/utils/storage";
import { isWeiXin } from "@/utils/index";
import vueQr from "vue-qr";
import html2canvas from "@/utils/html2canvas";
import { wx, wxInit } from "@/utils/jssdkInit";
import { formatDate } from "@/filter";
export default {
  components: {
    footerLogo,
    vueQr,
  },
  data() {
    return {
      detail: {},
      content: "",
      cfg,
      voteId: LgetItem("voteId"),
      commentList: [],
      listConfig: {
        loading: false,
        finished: false,
        error: false,
      },
      query: {
        contestantId: this.$route.query.playerId,
        pageNum: 1,
        pageSize: 10,
        voteId: LgetItem("voteId"),
      },
      count: 0,
      numDetail: {},
      authFollowed: false,
      showWeChatCode: false,
      wechatCodeQR: `${cfg.host}${
        cfg.baseUrl
      }/wx/qr-code/get-q-r-code?voteId=${LgetItem("voteId")}`,
      showVerfyCode: false,
      codeImage: {
        url: "",
        logicId: "",
        code: "",
        errorCode: "",
      },
      votedConfig: {
        showVoted: false,
        votedText: "投票成功",
        tips: "",
      },
      pullVoteShow: false,
      QRcodeUrl: "",
      voteInfo: {},
      pullImage: "",
      avater: "",
      contestantIds: [],
    };
  },
  computed: {
    ...mapGetters("configs", {
      ad: "ad",
      basic: "basic",
      commentary: "commentary",
      page: "page",
      wechat: "wechat",
      security: "security",
      rule: "rule",
      share: "share",
    }),
  },
  created() {
    this.isAuth();
    this.getVoteInfo();

    if (this.commentary.enabled && this.commentary.showContestantPageEnabled) {
      this.getCommentList();
    }
    this.getplayterNum();
  },
  methods: {
    shareFn() {
      console.log(window.location.href, "window.location.href");
      let that = this;
      let regstr1 = this.share.subTitle.replace(
        /\{number\}/g,
        this.detail.number
      );
      let regstr2 = regstr1.replace(/\{name\}/g, this.detail.name);
      let regstr3 = regstr2.replace(/\{actname\}/g, this.voteInfo.title);

      this.$nextTick(() => {
        wxInit()
          .then(() => {
            wx.updateAppMessageShareData({
              //分享到朋友
              title: regstr3, // 分享标题
              desc: that.share.context, // 分享描述
              link:
                window.location.href.indexOf("&id") != -1
                  ? window.location.href
                  : `${window.location.href}&id=${LgetItem("voteId")}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: that.share.imageLink
                ? that.share.imageLink
                : cfg.shareImg, // 分享图标
              success: () => {
                console.log("分享成功");
              },
            });
            console.log(`${window.location.href}&id=${LgetItem("voteId")}`);
            wx.updateTimelineShareData({
              //分享到朋友圈
              title: regstr3, // 分享标题
              link:
                window.location.href.indexOf("&id") != -1
                  ? window.location.href
                  : `${window.location.href}&id=${LgetItem("voteId")}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: that.share.imageLink
                ? that.share.imageLink
                : cfg.shareImg, // 分享图标
              success: function () {
                console.log("分享成功");
              },
            });
          })
          .catch((err) => {
            console.log(err, "err");
          });
        //   toast.clear();
      });
    },
    getVoteInfo() {
      this.$api("vote.getVoteInfo", {
        id: this.voteId,
      }).then((res) => {
        this.voteInfo = res;
        this.getPlayerDetail();
      });
    },
    handleGoBack() {
      this.$router.replace("/");
    },
    handleClose() {
      this.isAuth();
    },
    //是否关注公众号
    isAuth() {
      this.$api("sign.isAuth").then((res) => {
        this.authFollowed = res;
      });
    },
    //输入验证码点击确定提交投票
    handleConfirm() {
      if (this.codeImage.code && this.codeImage.code.length < 4) {
        this.codeImage.errorCode = "请输入4位验证码";
      } else if (!this.codeImage.code) {
        this.codeImage.errorCode = "请输入验证码";
      } else {
        let query = {
          code: this.codeImage.code,
          contestantIds: [this.detail.id],
          logicId: this.codeImage.logicId,
        };
        this.submitVote(query);
      }
    },
    handleVote() {
      if (this.security.limitDailyVotingTimeEnabled) {
        //当前时间是否在时间段内
        let limitBegin = new Date(
          formatDate(new Date(), "YYYY-MM-DD") +
            " " +
            this.security.limitDailyVotingTimeOnBeginValue
        ).getTime();
        let limitEnd = new Date(
          formatDate(new Date(), "YYYY-MM-DD") +
            " " +
            this.security.limitDailyVotingTimeOnEndValue
        ).getTime();
        let now = new Date().getTime();
        if (now >= limitBegin && now <= limitEnd) {
          if (this.rule.type == "SINGLE_CHOICE") {
            if (isWeiXin()) {
              //是否需要关注公众号才能投票、
              if (this.rule.followedVoting) {
                console.log("开启了关注公众号");
                //判断当前微信号是否已经关注了关注
                if (this.authFollowed) {
                  console.log("已经关注了关注");
                  //防刷票设置，是否需要验证码
                  if (this.security.verificationCodeEnabled) {
                    console.log("需要验证码");
                    this.getVerfyCode();
                  } else {
                    let query = {
                      code: "",
                      contestantIds: [this.detail.id],
                      logicId: "",
                    };
                    this.submitVote(query);
                  }
                } else {
                  //弹出公众号二维码让用户去关注
                  console.log("弹出公众号二维码让女用户管住");
                  this.showWeChatCode = true;
                }
              } else {
                if (this.security.verificationCodeEnabled) {
                  console.log("需要验证码");
                  this.getVerfyCode();
                } else {
                  let query = {
                    code: "",
                    contestantIds: [this.detail.id],
                    logicId: "",
                  };
                  this.submitVote(query);
                }
              }
            } else {
              //弹出活动二维码
              this.getVoteCoQR();
            }
          } else {
            //判断contestantIds是否已经有当前选手了,有移除，无添加
            let index = this.contestantIds.indexOf(this.detail.id);
            if (index != -1) {
              this.contestantIds.splice(index, 1);
            } else {
              if (this.rule.type == "MULTIPLE_CHOICE") {
                // typeMultipleChoiceMinValue;
                // typeMultipleChoiceMaxValue;
                if (
                  this.contestantIds.length >=
                  this.rule.typeMultipleChoiceMaxValue
                ) {
                  this.$toast(
                    `最多可选择${this.rule.typeMultipleChoiceMaxValue}项`
                  );
                } else {
                  this.contestantIds.push(this.detail.id);
                }
              }
              if (this.rule.type == "REQUIRED_CHOICE") {
                if (
                  this.contestantIds.length >= this.rule.typeRequiredChoiceValue
                ) {
                  this.$toast(
                    `最多可选择${this.rule.typeRequiredChoiceValue}项`
                  );
                } else {
                  this.contestantIds.push(this.detail.id);
                }
              }
            }
          }
        } else {
          //提示用户该时间段内不可投票
          this.$toast(`当前时间不可${this.voteInfo.type}`);
        }
      } else {
        if (this.rule.type == "SINGLE_CHOICE") {
          if (isWeiXin()) {
            //是否需要关注公众号才能投票、
            if (this.rule.followedVoting) {
              console.log("开启了关注公众号");
              //判断当前微信号是否已经关注了关注
              if (this.authFollowed) {
                console.log("已经关注了关注");
                //防刷票设置，是否需要验证码
                if (this.security.verificationCodeEnabled) {
                  console.log("需要验证码");
                  this.getVerfyCode();
                } else {
                  let query = {
                    code: "",
                    contestantIds: [this.detail.id],
                    logicId: "",
                  };
                  this.submitVote(query);
                }
              } else {
                //弹出公众号二维码让用户去关注
                console.log("弹出公众号二维码让女用户管住");
                this.showWeChatCode = true;
              }
            } else {
              if (this.security.verificationCodeEnabled) {
                console.log("需要验证码");
                this.getVerfyCode();
              } else {
                let query = {
                  code: "",
                  contestantIds: [this.detail.id],
                  logicId: "",
                };
                this.submitVote(query);
              }
            }
          } else {
            //弹出活动二维码
            this.getVoteCoQR();
          }
        } else {
          //判断contestantIds是否已经有当前选手了,有移除，无添加
          let index = this.contestantIds.indexOf(this.detail.id);
          if (index != -1) {
            this.contestantIds.splice(index, 1);
          } else {
            if (this.rule.type == "MULTIPLE_CHOICE") {
              // typeMultipleChoiceMinValue;
              // typeMultipleChoiceMaxValue;
              if (
                this.contestantIds.length >=
                this.rule.typeMultipleChoiceMaxValue
              ) {
                this.$toast(
                  `最多可选择${this.rule.typeMultipleChoiceMaxValue}项`
                );
              } else {
                this.contestantIds.push(this.detail.id);
              }
            }
            if (this.rule.type == "REQUIRED_CHOICE") {
              if (
                this.contestantIds.length >= this.rule.typeRequiredChoiceValue
              ) {
                this.$toast(`最多可选择${this.rule.typeRequiredChoiceValue}项`);
              } else {
                this.contestantIds.push(this.detail.id);
              }
            }
          }
        }
      }

      // if (isWeiXin()) {
      //   //是否需要关注公众号才能投票、
      //   if (this.rule.followedVoting) {
      //     console.log("开启了关注公众号");
      //     //判断当前微信号是否已经关注了关注
      //     if (this.authFollowed) {
      //       console.log("已经关注了关注");
      //       //防刷票设置，是否需要验证码
      //       if (this.security.verificationCodeEnabled) {
      //         console.log("需要验证码");
      //         this.getVerfyCode();
      //       } else {
      //         let query = {
      //           code: "",
      //           contestantIds: [this.detail.id],
      //           logicId: "",
      //         };
      //         this.submitVote(query);
      //       }
      //     } else {
      //       //弹出公众号二维码让用户去关注
      //       console.log("弹出公众号二维码让女用户管住");
      //       this.showWeChatCode = true;
      //     }
      //   } else {
      //     if (this.security.verificationCodeEnabled) {
      //       console.log("需要验证码");
      //       this.getVerfyCode();
      //     } else {
      //       let query = {
      //         code: "",
      //         contestantIds: [this.detail.id],
      //         logicId: "",
      //       };
      //       this.submitVote(query);
      //     }
      //   }
      // } else {
      //   //弹出活动二维码
      //   this.getVoteCoQR();
      // }
    },
    handleVotes() {
      //既然能够显示已选项，就不用考虑时间范围了
      console.log(this.contestantIds);
      //需要考虑已选项是否符合规则
      if (this.rule.type == "MULTIPLE_CHOICE") {
        if (this.contestantIds.length >= this.rule.typeMultipleChoiceMinValue) {
          if (isWeiXin()) {
            //是否需要关注公众号才能投票、
            if (this.rule.followedVoting) {
              console.log("开启了关注公众号");
              //判断当前微信号是否已经关注了关注
              if (this.authFollowed) {
                console.log("已经关注了关注");
                //防刷票设置，是否需要验证码
                if (this.security.verificationCodeEnabled) {
                  console.log("需要验证码");
                  this.getVerfyCode();
                } else {
                  let query = {
                    code: "",
                    contestantIds: this.contestantIds,
                    logicId: "",
                  };
                  this.submitVote(query);
                }
              } else {
                //弹出公众号二维码让用户去关注
                console.log("弹出公众号二维码让女用户管住");
                this.showWeChatCode = true;
              }
            } else {
              if (this.security.verificationCodeEnabled) {
                console.log("需要验证码");
                this.getVerfyCode();
              } else {
                let query = {
                  code: "",
                  contestantIds: this.contestantIds,
                  logicId: "",
                };
                this.submitVote(query);
              }
            }
          } else {
            //弹出活动二维码
            this.getVoteCoQR();
          }
        } else {
          console.log(111);
          this.$toast(`最少${this.rule.typeMultipleChoiceMinValue}项`);
        }
      }
      if (this.rule.type == "REQUIRED_CHOICE") {
        if (this.contestantIds.length == this.rule.typeRequiredChoiceValue) {
          if (isWeiXin()) {
            //是否需要关注公众号才能投票、
            if (this.rule.followedVoting) {
              console.log("开启了关注公众号");
              //判断当前微信号是否已经关注了关注
              if (this.authFollowed) {
                console.log("已经关注了关注");
                //防刷票设置，是否需要验证码
                if (this.security.verificationCodeEnabled) {
                  console.log("需要验证码");
                  this.getVerfyCode();
                } else {
                  let query = {
                    code: "",
                    contestantIds: this.contestantIds,
                    logicId: "",
                  };
                  this.submitVote(query);
                }
              } else {
                //弹出公众号二维码让用户去关注
                console.log("弹出公众号二维码让女用户管住");
                this.showWeChatCode = true;
              }
            } else {
              if (this.security.verificationCodeEnabled) {
                console.log("需要验证码");
                this.getVerfyCode();
              } else {
                let query = {
                  code: "",
                  contestantIds: this.contestantIds,
                  logicId: "",
                };
                this.submitVote(query);
              }
            }
          } else {
            //弹出活动二维码
            this.getVoteCoQR();
          }
        } else {
          console.log(222);
          this.$toast(`必须选择${this.rule.typeRequiredChoiceValue}项`);
        }
      }
    },
    //提交投票
    submitVote(query) {
      this.$api("vote.submitVote", {
        ...query,
        voteId: this.voteId,
      })
        .then((res) => {
          console.log(res);
          //投票成功之后，判断是否有投票提示广告
          if (this.ad.votingLinkEnabled) {
            this.votedConfig.showVoted = true;
            this.votedConfig.votedText = `${this.voteInfo.type}成功`;
          } else {
            this.$notify({
              type: "success",
              message: `${this.voteInfo.type}成功`,
            });
          }
           this.contestantIds = [];
          this.getplayterNum();
        })
        .catch((err) => {
          if (this.ad.votingLinkEnabled) {
            this.votedConfig.showVoted = true;
            this.votedConfig.votedText = `${this.voteInfo.type}失败`;
            this.votedConfig.tips = err.desc;
          } else {
            this.$notify({
              type: "danger",
              message: err.desc,
            });
          }
          console.log(err);
        });
    },
    handlePull() {
      this.QRcodeUrl = `${window.location.href}&id=${this.voteId}`;
      if (this.detail.coverType == "IMAGE" && this.detail.coverLink) {
        this.$api("config.getBase64", {
          url: this.detail.coverLink,
        }).then((res) => {
          console.log(res);
          this.avater = res;
          this.pullVoteShow = true;
          this.shares();
        });
      } else {
        this.avater = require("../../assets/images/cover.png");
        this.pullVoteShow = true;
        this.shares();
      }

      // this.pullVoteShow = true;
    },
    shares() {
      let that = this;
      setTimeout(() => {
        html2canvas(that.$refs.posters, {
          width: that.$refs.posters.offsetWidth,
          height: that.$refs.posters.offsetHeight,
          backgroundColor: "#ffffff",
          useCORS: true,
          scale: 2,
          allowTaint: true,
          taintTest: false,
          logging: true,
        }).then(function (canvas) {
          var context = canvas.getContext("2d");
          context.mozImageSmoothingEnabled = false;
          context.webkitImageSmoothingEnabled = false;
          context.msImageSmoothingEnabled = false;
          context.imageSmoothingEnabled = false;
          const img = canvas
            .toDataURL("image/jpeg", 2.0)
            .replace("data:image/jpeg;base64,", "");
          that.pullImage = "data:image/jpeg;base64," + img;
          // // console.log(that.finalImageSrc);
          // console.log(that.finalImageSrc)
          // that.pullImage=
        });
      }, 0);
    },
    getplayterNum() {
      this.$api("player.playterNum", {
        id: this.$route.query.playerId,
      }).then((res) => {
        console.log(res);
        this.numDetail = res;
        if (this.numDetail.no <= 10) {
          this.$nextTick(() => {
            console.log(this.$refs.stripesl, "111");
            setTimeout(() => {
              this.$refs.stripesl.style.width = "50%";
              if (res.no > 1 && res.no < 3) {
                this.$refs.stripesl.style.width = "73%";
                this.$refs.img_04.style.left = "73%";
              } else if (res.no > 3 && res.no < 10) {
                this.$refs.stripesl.style.width = "48%";
                this.$refs.img_04.style.left = "48%";
              } else if (res.no == 1) {
                this.$refs.stripesl.style.width = "86%";
                this.$refs.img_04.style.left = "88%";
              } else if (res.no == 3) {
                this.$refs.stripesl.style.width = "61%";
                this.$refs.img_04.style.left = "61%";
              } else if (res.no == 10) {
                this.$refs.stripesl.style.width = "25%";
                this.$refs.img_04.style.left = "25%";
              }

              // this.$refs.stripesl.style.width = ((10-res.no)+1)/10*100+'%'
              // this.$refs.img_04.style.left=((10-res.no)+1)/10*100+'%'
            }, 0);
          });
        }
      });
    },
    //获取验证码
    getVerfyCode() {
      this.$api("vote.getVerfycode").then((res) => {
        this.codeImage.url = res.data;
        this.codeImage.logicId = res.logicId;
        this.showVerfyCode = true;
      });
    },
    getCommentList() {
      this.$api("player.commentDetails", this.query)
        .then((res) => {
          console.log(res);
          this.count = res.count;
          if (res.count < 10) {
            this.listConfig.finished = true;
          }
          this.commentList.push(...res.data);
          this.listConfig.loading = false;
          if (res.data.length < 10) {
            this.listConfig.finished = true;
          }
        })
        .catch(() => {
          this.listConfig.loading = false;
          this.listConfig.error = true;
        });
    },
    getList() {
      this.query.pageNum++;
      setTimeout(() => {
        this.getCommentList();
      }, 100);
    },
    getPlayerDetail() {
      this.$api("player.getPlayerDetail", {
        id: this.$route.query.playerId,
      }).then((res) => {
        this.detail = res;
        this.detail.imageLink = JSON.parse(this.detail.imageLink);
        this.shareFn();
      });
    },
    submitComment() {
      let strContent = "";
      strContent = this.content.replace(/\r\n/g, " "); //IE9、FF、chrome
      strContent = this.content.replace(/\n/g, " "); //IE7-8
      strContent = this.content.replace(/\s/g, " "); //空格处理
      this.content = strContent.trim();
      if (this.content) {
        this.$api("player.comment", {
          content: this.content,
          contestantId: this.detail.id,
          voteId: this.detail.voteId,
        }).then((res) => {
          console.log(res);
          this.$toast({
            type: "text",
            message: "评论成功",
            duration: 1000,
            onClose: () => {
              this.content = "";
            },
          });
        });
      } else {
        this.$toast({
          type: "text",
          message: "请输入评论内容",
          duration: 1000,
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.detail_wrap {
  width: 100vw;
  min-height: 100vh;
  position: relative;
  .choice {
    position: fixed;
    bottom: calc(65px + constant(safe-area-inset-bottom));
    bottom: calc(65px + env(safe-area-inset-bottom));
    left: 0;
    width: 100%;
    .choice_wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #fff;
      padding: 0 10px;
      box-sizing: border-box;
      width: 100%;
      height: 42px;
      .choice-left {
        font-size: 12px;
        color: #797979;
      }
      .choice-right {
        font-size: 14px;
        color: #fff;
        padding: 5px 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 2px;
      }
    }
  }

  .btn_wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // background: #FB4723;
    padding: 10px 0;
    .go-back {
      width: 45px;
      height: 45px;
      margin-left: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .voteBtn {
      flex: 1;
      background: #fff;
      color: #fb4723;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      height: 45px;
      line-height: 45px;
      border-radius: 20px;
      margin: 0 5px;
    }
    .share {
      width: 45px;
      height: 45px;
      margin-right: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .banner_wrap {
    .banner_item {
      font-size: 0;
      ::v-deep.van-image {
        width: 100%;
        height: 200px;
      }
    }
  }
  .detail-container {
    padding: 0 10px;

    .detail_title {
      text-align: center;
      color: #fff;
      font-size: 18px;
      padding: 30px 0;
    }
    .detail_head {
      background-color: #fff;
      padding: 0 15px;
      display: flex;
      align-items: center;
      border-radius: 50px;
      height: 60px;
      .item {
        flex: 1;
        text-align: center;
        &:first-child {
          border-left: none !important;
        }
        .num {
          font-size: 16px;
          font-weight: bold;
        }
        .name {
          font-size: 12px;
          margin-top: 5px;
        }
      }
      // .line {
      //   width: 1px;
      //   height: 30px;
      // }
    }
    .detail_images {
      position: relative;
      height: 150px;
      width: 100%;
      overflow: hidden;
      .img_01 {
        position: absolute;
        top: 66px;
        left: 0;
        height: 20px;
        width: 100%;
        z-index: 1;
        font-size: 0;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .img_02 {
        position: absolute;
        top: 35px;
        left: 20%;
        z-index: 2;
        text-align: center;
        font-size: 0;
        img {
          width: 30px;
          height: auto;
        }
        .tips_btn {
          width: 70px;
          margin-top: 10px;
          height: 20px;
          background-image: url("../../assets/images/prize4.png");
          background-repeat: no-repeat;
          background-size: cover;
          display: flex;
          justify-content: center;
          align-items: center;
          span {
            display: inline-block;
            font-size: 12px;
          }
        }
        .tips {
          margin-top: 4px;
          font-size: 13px;
          color: #fff;
        }
      }
      .img_03 {
        position: absolute;
        top: 30px;
        left: 56%;
        z-index: 2;
        text-align: center;
        font-size: 0;
        img {
          width: 35px;
          height: auto;
        }
        .tips_btn {
          width: 70px;
          margin-top: 10px;
          height: 20px;
          background-image: url("../../assets/images/prize4.png");
          background-repeat: no-repeat;
          background-size: cover;
          display: flex;
          justify-content: center;
          align-items: center;
          span {
            display: inline-block;
            font-size: 12px;
          }
        }
        .tips {
          margin-top: 4px;
          font-size: 13px;
          color: #fff;
        }
      }
      .img_04 {
        position: absolute;
        top: 50px;
        // left: 230px;
        transition: left 1s;
        left: 0;
        z-index: 3;
        transform: translateX(-50%);
        font-size: 0;
        .huoqiu_wrap {
          position: relative;
          img {
            width: 70px;
            height: auto;
          }
          .no {
            font-size: 12px;
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
          }
        }
      }
      .img_05 {
        position: absolute;
        top: 10px;
        left: 78%;
        z-index: 2;
        text-align: center;
        font-size: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 80px;
          height: auto;
        }
        .tips_btn {
          width: 70px;
          margin-top: 10px;
          height: 20px;
          background-image: url("../../assets/images/prize4.png");
          background-repeat: no-repeat;
          background-size: cover;
          display: flex;
          justify-content: center;
          align-items: center;
          span {
            display: inline-block;
            font-size: 12px;
          }
        }
        .tips {
          margin-top: 4px;
          font-size: 13px;
          color: #fff;
        }
      }
    }
    .info_wrap {
      background-color: #fff;
      padding: 20px 10px;
      border-radius: 4px;
      margin-top: 15px;
      .ranking_title {
        font-size: 30px;
        text-align: center;
        img {
          width: 144px;
          height: auto;
        }
      }
      .player_img {
        margin: 0 auto;
        margin-top: 20px;
        width: 300px;
        height: 300px;
        border-radius: 8px;
        position: relative;
        ::v-deep.van-image {
          width: 100%;
          height: 100%;
        }
        .left_show {
          position: absolute;
          left: 0;
          top: 20px;
          color: #fff;
          width: 100px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          border-top-right-radius: 30px;
          border-bottom-right-radius: 30px;
          font-size: 14px;
        }
      }

      .details {
        margin-top: 10px;
        .intr_title {
          font-size: 16px;
          text-align: center;
          padding: 5px 0;
        }
        .CAROUSEL {
          .banner_item {
            font-size: 0;
            ::v-deep.van-image {
              width: 100%;
              height: 100%;
            }
          }
        }
        .JIUGONGGE {
          ::v-deep.van-image {
            width: 100px;
            height: 100px;
          }
        }
        .VERTICAL {
          .VERTICAL_item {
            font-size: 0;
            width: 100%;
            height: 144px;
            margin-bottom: 8px;
            ::v-deep.van-image {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
  .comment_wrap {
    margin: 10px;
    background-color: #fff;
    padding: 10px;
    border-radius: 4px;
    ::v-deep.van-field {
      border: 1px solid #f1f1f1;
      border-radius: 4px;
    }
    .submitComment {
      width: 100%;
      height: 40px;
      line-height: 40px;
      color: #fff;
      font-size: 14px;
      text-align: center;
      margin-top: 10px;
      border-radius: 4px;
    }
  }
  .comment-list {
    margin: 10px;
    background: #fff;
    border-radius: 4px;
    padding: 10px;
    .title {
      font-size: 15px;
      line-height: 30px;
    }
    .comment-item {
      display: flex;
      border-bottom: 1px solid #f1f1f1;
      padding-bottom: 10px;
      margin-top: 10px;
      .item-left {
        flex: 0 0 30px;
        img {
          width: 100%;
          height: 30px;
        }
      }
      .item-right {
        flex: 1;
        padding-left: 10px;
        word-break: break-all;
        .title_name {
          font-size: 14px;
        }
        .details_ll {
          padding: 5px 0;
          font-size: 13px;
          line-height: 20px;
        }
        .detail_time {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
  #qrWeChatCode {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    flex-direction: column;
    span {
      margin-top: 15px;
      color: #999;
      font-size: 12px;
    }
  }
  .verfyCode_wrap {
    padding: 20px 0;
    display: flex;
    align-items: center;
    .input {
      flex: 1;
    }
    .img {
      flex: 1;
      text-align: center;
      img {
        width: 100px;
        height: 44px;
      }
    }
  }
  .votedLink {
    ::v-deep.van-dialog__header {
      color: #fb4723;
    }
    .votedTips {
      font-size: 12px;
      color: #999;
      text-align: center;
      line-height: 22px;
    }
    .link_wrap {
      width: 100%;
      height: 250px;
      font-size: 0;
      margin-top: 8px;
    }
    ::v-deep.van-image {
      width: 100%;
      height: 100%;
    }
  }
  .pullVoteShow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    bottom: 0;
    z-index: 999999;
    .pull_wrap {
      width: 300px;
      height: 410px;
      margin: calc(18vh -24px) auto;
      position: relative;
      .pull_box {
        width: 300px;
        height: 410px;
        background-image: url("../../assets/images/pull.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        .number {
          padding-top: 25px;
          .num {
            width: 120px;
            height: 32px;
            margin: 0 auto;
            font-size: 18px;
            color: #fb4723;
            text-align: center;
            line-height: 32px;
            background-color: #fff;
            border-radius: 18px;
          }
        }
        .name {
          text-align: center;
          color: #fff;
          margin: 15px 0;
          font-size: 15px;
        }
        .avater {
          width: 170px;
          height: 170px;
          margin: 0 auto;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .bottom_wrap {
          margin-top: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          .textTips {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-right: 20px;
            .text1 {
              font-size: 22px;
              color: #fff;
            }
            .text2 {
              font-size: 18px;
              background-color: #fff;
              border-radius: 20px;
              line-height: 30px;
              margin-top: 10px;
              padding: 0 10px;
            }
          }
          .qrcode {
            width: 80px;
            height: 80px;
            background-color: #fff;
            border-radius: 12px;
          }
        }
      }
      .close_box {
        position: absolute;
        bottom: -70px;
        color: #fff;
        left: 50%;
        z-index: 999999;
        transform: translateX(-50%);
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
    }
  }
}
.stripes_wrap {
  width: 100%;
  height: 18px;
  border-radius: 18px;
  background-color: rgb(194, 7, 20);
  position: absolute;
  top: 66px;
  left: 0;
  z-index: 1;
}
.stripes {
  transition: width 1s;
  height: 100%;
  // width: 50%;
  width: 0;
  border-radius: 18px;
  -webkit-background-size: 15px 15px;
  -moz-background-size: 15px 15px;
  background-size: 15px 15px; /* 控制条纹的大小 */

  -moz-box-shadow: 1px 1px 8px gray;
  -webkit-box-shadow: 1px 1px 8px gray;
  box-shadow: 1px 1px 8px gray;
}
.angled-135 {
  background-color: rgb(245, 56, 22);
  background-image: -webkit-gradient(
    linear,
    0 0,
    100% 100%,
    color-stop(0.25, rgba(255, 255, 255, 0.2)),
    color-stop(0.25, transparent),
    color-stop(0.5, transparent),
    color-stop(0.5, rgba(255, 255, 255, 0.2)),
    color-stop(0.75, rgba(255, 255, 255, 0.2)),
    color-stop(0.75, transparent),
    to(transparent)
  );
  background-image: -moz-linear-gradient(
    -45deg,
    rgb(251, 155, 58) 25%,
    transparent 25%,
    transparent 50%,
    rgb(251, 155, 58) 50%,
    rgb(251, 155, 58) 75%,
    transparent 75%,
    transparent
  );
  background-image: -o-linear-gradient(
    -45deg,
    rgb(251, 155, 58) 25%,
    transparent 25%,
    transparent 50%,
    rgb(251, 155, 58) 50%,
    rgb(251, 155, 58) 75%,
    transparent 75%,
    transparent
  );
  background-image: linear-gradient(
    -45deg,
    rgb(251, 155, 58) 25%,
    transparent 25%,
    transparent 50%,
    rgb(251, 155, 58) 50%,
    rgb(251, 155, 58) 75%,
    transparent 75%,
    transparent
  );
}
</style>